// 创建一个过滤时间的过滤器
Vue.filter('date', time => moment(time).format('DD/MM/YYYY, HH:mm:ss'))

new Vue({
	el: '#notebook',
	data() {
		return {
			/*
			 * 每一条笔记都有如下的数据对象
			 * id ：笔 记 的 唯 一 标 识 符。 
			 * title ：笔 记 的 标 题， 用 来 显 示 在 笔 记 列 表 中。 
			 * content ：笔 记 的 Markdown 格 式 内 容。 
			 * created ：笔 记 创 建 的 日 期。 
			 * favorite ：这 是 一 个 布 尔 值， 用 于 表 示 是 否 收 藏 了 笔 记， 已 收 藏 的 笔 记 显 示 在 笔 记 列 表 的 顶 部。
			 */
			notes: JSON.parse(localStorage.getItem('notes')) || [], // 笔记数组
			selectedId: localStorage.getItem('selected-id') || null,
		}
	},
	created() {

	},
	computed: {
		// 预览笔记
		notePreview() {
			return this.selectedNote ? marked(this.selectedNote.content) : '';
		},
		// 添加按钮button的title属性值
		addButtonTitle() {
			return `已完成${this.notes.length}条笔记`;
		},
		// 选中的笔记
		selectedNote() {
			// 返回跟selectedId匹配的笔记
			return this.notes.find(note => note.id === this.selectedId);
		},
		// 对笔记进行排序，收藏的笔记排在前面，再根据创建时间排序
		// 由 于 sort 方 法 会 直 接 修 改 源 数 组， 这 里 使 用 slice 方 法 创 建 新 的 副 本。 这 样 可 以 防 止 触 发 notes 侦 听 器。
		sortedNotes() {
			return this.notes.slice().sort((a, b) => a.created - b.created)
				.sort((a, b) => (a.favorite === b.favorite) ? 0 : a.favorite ? -1 : 1)
		},
		// 统计行数
		linesCount() {
			if (this.selectedNote) {
				// /\r\n|\r|\n/ 根据换行符正则，拆分字符串，获取行数
				return this.selectedNote.content.split(/\r\n|\r|\n/).length;
			}
		},
		// 统计字数
		wordsCount() {
			if (this.selectedNote) {
				let s = this.selectedNote.content;
				// 将换行符转行成为空格
				s = s.replace(/\n/g, ' ');
				// 去除开头和结尾的一个或多个空格
				s = s.replace(/(^\s*)|(\s*$)/, '');
				// 返回空格数量
				return s.split(' ').length;
			}
		},
		charactersCount() {
			if (this.selectedNote) {
				return this.selectedNote.content.split('').length;
			}
		}
	},
	watch: {
		// 直接监听，是不能监听到notes的变化，需要使用deep选项
		// notes: 'saveNotes',
		notes: {
			handler: 'saveNotes',
			deep: true,
		},
		// 保存用户当前选中项，下次打开界面自动展示
		selectedId(val) {
			localStorage.setItem('selected-id', val);
		},
	},
	methods: {
		// 保存笔记文件
		saveNotes() {
			localStorage.setItem('notes', JSON.stringify(this.notes));
		},
		/*
		 * 使用默认值创建一个新的笔记，添加到笔记数组中去
		 */
		addNote() {
			const time = Date.now();
			const note = {
				id: String(time),
				title: 'New note ' + (this.notes.length + 1),
				content: '**Hi!** This notebook is using [markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) for formatting!',
				created: time,
				favorite: false,
			}
			// 添加到列表
			this.notes.push(note);
		},
		// 选中一条笔记
		selectNote(note) {
			this.selectedId = note.id;
		},
		// 删除一条笔记
		removeNote() {
			if (this.selectedNote && confirm('Delete the note?')) {
				// 将选中的笔记从笔记列表中删除
				const index = this.notes.indexOf(this.selectedNote);
				if (index !== -1) {
					this.notes.splice(index, 1);
				}
			}
		},
		// 收藏或者取消收藏
		favoriteNote() {
			// 对值取反可以用异或来快捷写
			this.selectedNote.favorite ^= true;
		}
	}
})
